<template>
    <div v-if="timeListFilter.length !== 0" style="display: flex; height: 100%">
        <div style="width: 155px; margin-left: 5px; display: flex; flex-direction: column; justify-content: center">
            <div style="height: 40px; color: #b2e3ff; font-size: 16px; line-height: 40px">时间列表:</div>
            <div style="height: calc(100vh - 202px); margin-top: 2px; display: flex">
                <div style="flex: 1; height: 100%; overflow-y: auto">
                    <div :class="select === item ? 'select cursor' : 'cursor'" style="color: #b2e3ff; font-size: 14px; height: 20px" @click="change(item)" v-for="item in timeListFilter" :key="item">
                        {{ textFilter(item) }}
                    </div>
                </div>
                <div style="height: 100%; width: 5px; border-right: 2px solid aqua"></div>
            </div>
        </div>
        <div v-if="select !== ''" style="flex: 1; margin-left: 20px; height: 100%">
            <div style="height: 40px; color: #b2e3ff; font-size: 16px; display: flex; align-items: center">
                <div>音频播放:</div>
                <audio id="myAudio" controls style="margin: 0 20px; height: 40px; flex: 1; opacity: 0.7">
                    <source :src="url" type="audio/mpeg" />
                </audio>
            </div>
            <div style="height: calc(100vh - 202px); margin-top: 2px">
                <div ref="box2" style="height: 50%"></div>
                <div ref="box1" style="height: 50%"></div>
            </div>
        </div>
    </div>
    <div v-else style="color: #b2e3ff">该时间段暂无音频波形</div>
</template>

<script>
import { requestApi } from '@/requset/api'
import * as echarts from 'echarts'
import { Loading } from 'element-ui'
import { options1, options2 } from './config'
export default {
    data() {
        return {
            timeList: [],
            select: '',
            options1: null,
            options2: null,
        }
    },
    props: {
        sensorInfo: {
            type: Object,
            default() {
                return null
            },
        },
        date_time: {
            type: Array,
            default() {
                return []
            },
        },
    },
    methods: {
        change(item) {
            this.select = ''
            let loading = Loading.service({
                target: 'body',
                background: 'rgb(0,0,0,.4)',
            })
            this.$nextTick(() => {
                this.select = item
                this.$nextTick(() => {
                    requestApi('post', 'wave/get', { name: this.sensorInfo.port + '_' + this.sensorInfo.address, time: item })
                        .then((res) => {
                            this.options1.series = this.options1.series = {
                                name: '',
                                data: res.data.data,
                                type: 'line',
                            }
                            this.options1.xAxis.data = res.data.fregs
                            let ref1 = this.$refs.box1
                            var myChart1 = echarts.init(ref1)
                            myChart1.setOption(this.options1)
                            const chartObserver1 = new ResizeObserver(() => {
                                myChart1.resize()
                            })
                            chartObserver1.observe(ref1)
                            window.addEventListener('resize', function () {
                                myChart1.resize()
                            })
                            this.options2.series = this.options2.series = {
                                name: '',
                                data: res.data.audio_array,
                                type: 'line',
                            }
                            let t = this.dayjs(this.textFilter(item)).valueOf()
                            let l = []
                            let length = Math.ceil(res.data.audio_array.length / res.data.framerate)
                            for (let ii = 0; ii < length; ii++) {
                                let arr = new Array(Math.ceil((res.data.audio_array.length - 10) / length)).fill(this.dayjs(t - ii * 1000).format('HH:mm:ss'))
                                l.unshift(...arr)
                            }
                            this.options2.xAxis.data = l
                            let ref2 = this.$refs.box2
                            var myChart2 = echarts.init(ref2)
                            myChart2.setOption(this.options2)
                            const chartObserver2 = new ResizeObserver(() => {
                                myChart2.resize()
                            })
                            chartObserver2.observe(ref2)
                            window.addEventListener('resize', function () {
                                myChart2.resize()
                            })
                        })
                        .finally(() => {
                            loading.close()
                        })
                    let audio = document.getElementById('myAudio')
                    audio.onloadedmetadata = function () {
                        audio.currentTime = audio.duration
                    }
                })
            })
        },
        textFilter(item) {
            let l = item.split(' ')
            l[1] = l[1].replace('.wav', '').replace(/-/g, ':')
            return l.join(' ')
        },
        getAll() {
            this.select = ''
            if (this.sensorInfo) {
                requestApi('post', 'wave/getAll', { name: this.sensorInfo.port + '_' + this.sensorInfo.address }).then((res) => {
                    this.timeList = res.data.data
                })
            }
        },
    },
    computed: {
        url() {
            return `/static/audio/${this.sensorInfo.port}_${this.sensorInfo.address}/${this.select}`
        },
        timeListFilter() {
            return this.date_time && this.date_time.length !== 0
                ? this.timeList.filter((item) => {
                      return new Date(this.date_time[0]).getTime() <= new Date(this.textFilter(item)).getTime() && new Date(this.textFilter(item)).getTime() <= new Date(this.date_time[1]).getTime()
                  })
                : this.timeList
        },
    },
    created() {
        this.options1 = options1
        this.options2 = options2
        this.getAll()
    },
    watch: {
        sensorInfo: {
            handler() {
                this.getAll()
            },
            deep: true,
        },
        date_time: {
            handler() {
                this.getAll()
            },
            deep: true,
        },
    },
}
</script>

<style lang="less" scoped>
.select {
    color: aqua !important;
}

::-webkit-scrollbar {
    width: 4px;
    height: 10px;
    background-color: #06275b;
    border-radius: 2px;
}

::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(216, 39, 39, 0.3);
    background-color: #b2e3ff;
    border-radius: 2px;
}
</style>
